<template>
  <el-aside width="200px">
    <el-menu
      router
      unique-opened
      background-color="#333744"
      text-color="#fff"
    >
      <el-submenu
        :index="item.id + ''"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <template v-slot:title>
          <i :class="`shopicon ${item.icon}`"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item
          :index="'/' + subItem.path"
          v-for="(subItem, index) in item.children"
          :key="index"
        >
          <template v-slot:title>
            <i class="el-icon-menu"></i>
            <span>{{subItem.authName}}</span>
          </template>
        </el-menu-item>
      </el-submenu>

    </el-menu>

  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
    };
  },
  created() {
    this.getMenu();
  },
  methods: {
    async getMenu() {
      const { data: res } = await this.$http.get("menus");

      if (res.meta.status !== 200) {
        this.$message.error(res.meta.message);
        return;
      }

      // 获取到的菜单
      const menuList = res.data;
      // 自己的路由配置
      const menuRoutes = this.$router.options.routes.find(
        (item) => item.path === "/home"
      ).children;

      menuList.forEach((item) => {
        const currentRoute = menuRoutes.find(
          (route) => route.path.substr(1) === item.path
        );
        if (!!currentRoute) {
          item.icon = currentRoute.icon;
        }
      });

      this.menuList = menuList;
    },
  },
};
</script>

<style lang="less" scoped>
.el-aside {
  background: #333744;
  .el-menu {
    border-right: none;
  }
  .shopicon {
    margin-right: 10px;
  }
}
</style>